How to properly position 3rd level menu [migrated]
Posted
by
drewrowalnd
on Pro Webmasters
See other posts from Pro Webmasters
or by drewrowalnd
Published on 2011-11-10T22:43:13Z
Indexed on
2011/11/11
18:28 UTC
Read the original article
Hit count: 195
css
If you look here: http://snippetmagazine.com/ under about isl->board of trustees you can se I have created a third level dropdown, but how can I properly align that drop down? Below you will see my css.
#menudiv {
width: 999px;
float: left;
clear: left;
height: 250px;
background: url(images/top_bg.png) no-repeat;
margin-top: 10px;
}
mainmenu {
width: 948px;
height: 63px;
float: left;
margin-left: 16px;
margin-top:5px;
border: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
background:url(images/nav_bg.gif) repeat;
}
.mainnav {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav * {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav ul {
position: absolute;
top: -999em;
display: none;
}
.mainnav li {
float: left;
position: relative;
z-index: 999;
height: 63px;
line-height: 55px;
margin-right: 0px;
border-right: 1px solid #D5D5D5;
}
.mainnav li.last {
border-right: none;
}
.mainnav a {
display: block;
font-size: 19px;
margin: 0;
color: #cc9900;
font-family: Copperplate, Arial, Helvetica, Sans serif;
font-weight:600;
text-decoration: none;
padding: 3px 13px 3px 12px;
color: #555;
text-shadow: 0 1px 1px white;
}
.mainnav li:hover {
text-decoration: none;
border-bottom: solid 0px #ccc;
background: white;
}
.mainnav ul li{
width: 132px;
}
.mainnav li:hover ul,
ul.mainnav li.sfHover ul {
left: 0px;
top: 50px;
padding-top: 0px;
width: 132px;
border-bottom: solid 0px #eaeaea;
background: url(images/nav_dropdown_shadow.gif) repeat-x top;
padding: 6px 0 0px 0px;
margin: 13px 0 0 -1px;
border: 1px solid #D5D5D5;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
width: 175px;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
}
.mainnav li:hover li ul,
.mainnav li.sfHover li ul {
top: -999em;
}
.mainnav li li:hover ul,
ul.mainnav li li.sfHover ul {
left: 132px;
top: -8px;
}
.mainnav li:hover ul,
.mainnav li li:hover ul {
top: -999em;
}
.mainnav li li {
color: #555;
display: block;
padding: 0px;
height: auto !important;
border: none;
width:175px;
background: url(images/nav_dropdown_bg.gif) repeat;
margin: 0;
}
.mainnav li li a:link,
.mainnav li li a:visited {
display: block;
height: auto !important;
line-height: 30px;
color: #333;
font-weight: normal;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
border: none;
margin: 0;
padding-left: 10px;
overflow:hidden;
border-bottom: 1px solid #E3E3E3;
}
.mainnav li li :hover{
}
.mainnav li li a:hover {
background: none;
color:#555 ;
border-bottom: 1px solid #E3E3E3;
}
© Pro Webmasters or respective owner
